<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>图片标定</title>
  <link rel="stylesheet" href="./css/style.css">
  <script src="./node_modules/fabric/dist/fabric.js" charset="utf-8"></script>
  <script src="./node_modules/keymaster/keymaster.js" charset="utf-8"></script>
  <script src="./lib/calibrationbox.js" charset="utf-8"></script>
</head>

<body>
  <div class="vertical-container">
    <div class="message">
      提示
    </div>
    <div id="controls" class="vertical-align">
      <div>
        <button type="button" id="create">新建矩形标定框(Ctrl + c)</button>
        <button type="button" id="delete">删除 (Del)</button>
        <button type="button" id="clear">清空(Ctrl + Del)</button>
        <button type="button" id="save">保存(Ctrl + s)</button>
        |
        <button type="button" id="up">上移(up)</button>
        <button type="button" id="down">下移(down)</button>
        <button type="button" id="left">左移(left)</button>
        <button type="button" id="right">右移(right)</button>
        <!-- |
        <input type="button" id="resetButton" value="实际大小" /> -->
      </div>
      <div id="rubberbandDiv"></div>
      <div class="img-container">
        <canvas id="myCanvas" width="856" height="480">Canvas not supported</canvas>
      </div>
      <dl>
        <dt>提示：</dt>
        <dd>1. 可直接拖拽生成指定大小矩形标定框</dd>
        <dd>2. 为防止移动和创建事件冲突，不能在已有标定框上创建新标定框，但可以通过创建标定框再移动到期望位置方式实现。</dd>
        <!-- <dd>3. Todo:缩放待完善</dd> -->
      </dl>
    </div>
  </div>
</body>
<script src="./js/carbox.js" charset="utf-8"></script>

</html>
